<!--推荐有奖页面-->
<template>
  <div class="my_a_btab_ct">
    <img
      src="../../public/img/icons/P44S$G1XE7RHNOZP[KZLVVD.png"
      alt=""
      class="my_a_btab_ct_img"
    />
    <van-grid :column-num="3">
      <van-grid-item v-for="(item, index) in sj" :key="index">
        <van-icon
          class-prefix="iconfont"
          :class="item.icon_a"
          @click="playclick(index)"
        />
        <p class="my_a_btab_ct_p">{{ sj[index].text_a }}</p>
      </van-grid-item>
      <van-popup
        v-model="show"
        :class="{
          msgF: true,
          animate__animated: dada1,
          animate__bounceIn: dada2,
          animate__slow: dada3,
        }"
      >
        <div class="msg">
          <div>
            <i class="iconfont icon-alert impdiv"></i>
          </div>
          <p class="msg_p">{{ message }}</p>
          <button class="button1" @click="fanhuiclick">确定</button>
        </div>
      </van-popup>
    </van-grid>

    <div class="invite_num">
      <div class="invite_num_div1">
        <p class="invite_num_div1_p1">累计收益</p>
        <p class="invite_num_div1_p2">
          <span class="invite_num_div1_p2_span">0</span>元
        </p>
      </div>
      <div class="invite_num_div2">
        <p class="invite_num_div2_p1">成功邀请</p>
        <p class="invite_num_div2_p2">
          <span class="invite_num_div2_p2_span">0</span>人
        </p>
      </div>
    </div>
    <p class="income_detail">-收益说明-</p>
    <div class="incom_tips">
      <img
        src=""
        alt=""
        class="incom_tips_img"
      />
      <p class="incom_tips_p">还不赶紧去邀请好友</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "My_A_Btab_Ct",
  data: function () {
    return {
      sj: [
        { text_a: "邀请微信好友", icon_a: "icon-weixin" },
        { text_a: "邀请QQ好友", icon_a: "icon-QQ1" },
        { text_a: "面对面邀请", icon_a: "icon-mianduimianyaoqing" },
      ],
      show: false,
      message: "请在饿了么APP中打开",
      dada1: false,
      dada2: false,
      dada3: false,
    };
  },
  methods: {
    playclick() {
      this.show = true;
      this.dada1 = true;
      this.dada2 = true;
      this.dada3 = true;
    },
    fanhuiclick() {
      this.show = false;
      this.dada1 = false;
      this.dada2 = false;
      this.dada3 = false;
    },
  },
};
</script>

<style lang="less">
.my_a_btab_ct {
  .my_a_btab_ct_img {
    width: 375.333px;
    height: 234.375px;
  }
  .iconfont {
    font-size: 60px;
  }
  .icon-weixin {
    color: rgb(0, 207, 13);
  }
  .icon-QQ1 {
    color: rgb(54, 173, 251);
  }
  .icon-mianduimianyaoqing {
    color: rgb(250, 190, 17);
  }
  .my_a_btab_ct_imgd {
    width: 58.594px;
    height: 58.594px;
  }
  .my_a_btab_ct_p {
    font-size: 12px;
    margin-top: 5px;
    color: #333333;
  }
  .msgF {
    border-radius: 10px;
    margin: -21% -36%;
    display: none;
    .msg {
      width: 281.25px;
      text-align: center;

      .impdiv {
        font-size: 80px;
        color: #f8cb86;
        font-weight: 200;
      }
      .msg_p {
        color: #333333;
        margin-top: 10px;
      }
      .button1 {
        width: 100%;
        height: 42px;
        margin-top: 20px;
        background-color: #4cd964;
        border: none;
      }
    }
  }
  .animate__animated {
    display: block;
  }
  .invite_num {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 38.667px;
    margin-top: 23.438px;
    text-align: center;
    font-size: 12px;
    color: #666666;
    .invite_num_div1 {
      width: 50%;
      border-right: 1px solid #999;
      .invite_num_div1_p2 {
        .invite_num_div1_p2_span {
          font-size: 20px;
          font-weight: 900;
          color: #ff5633;
        }
      }
    }
    .invite_num_div2 {
      width: 50%;
      .invite_num_div2_p2 {
        .invite_num_div2_p2_span {
          font-size: 20px;
          font-weight: 900;
          color: #666;
        }
      }
    }
  }
  .income_detail {
    font-size: 12px;
    color: #666666;
    margin-top: 30px;
    text-align: center;
  }
  .incom_tips {
    text-align: center;
    margin-top: 30px;
    .incom_tips_img {
      width: 30.469px;
      height: 37.5px;
    }
    .incom_tips_p {
      font-size: 12px;
      color: #999999;
    }
  }
}
</style>